<template>
	<view class="container">
		<view class="tips">使用支付宝支付的两种方法：</view>
		<view class="tips_text">
			<view class="one_text">1、保存付款码到手机相册，打开支付宝APP，使用支付宝扫一扫、扫描付款码，进行支付。</view>
			<view>2、点击复制支付链接按钮，打开本地浏览器，粘贴链接，点击“在支付宝中打开链接”，完成支付。</view>
		</view>
		<view class="painter">
			<lPainter v-if="showPainter" :board="poster" :is-canvas-to-temp-filePath="true" path-type="url" @success="getPoster" />
		</view>
		<view class="btn">
			<view>
				<view class="xjs-btn-primary" @click="onAssistantQrcodeSave">保存付款码到手机</view>
			</view>
			<view>
				<view class="xjs-btn-primary-plain" @click="setClipboardData(url)">复制支付链接</view>
			</view>
			<view class="pay_btn">
				<image class="img" src="https://hospital-runsheng.oss-cn-shenzhen.aliyuncs.com/runsheng-wx/static_resources/icon-40.png"></image>
				<view @click="checkList[params.checkOrderType]" round>
					<view class="pay_btn_text">如已付款，请点击这里。</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { computed, reactive, ref } from 'vue';
import { onLoad, onBackPress } from '@dcloudio/uni-app';
import api from '@/api';
import lPainter from '@/pages/share/uni_modules/lime-painter/components/l-painter/l-painter.vue';
import { permissionGet } from '@/hooks/usePermission/index';
import { useUserStoreToRefs } from '@/store/useUserStore'
const { userInfo } = useUserStoreToRefs()
let params = reactive({});
let url = ref('');
let orderInfo = reactive({});
const posterPath = ref('');
const showPainter = ref(false);
const poster = computed(() => {
	return {
		css: {
			width: '650rpx',
			boxSizing: 'border-box',
			background: '#E6F6F6',
			padding: '40rpx 0'
		},
		views: [
			{
				type: 'view',
				css: {
					textAlign: 'center'
				},
				views: [
					{
						type: 'text',
						text: `付款金额：￥${params.payAmount}`,
						css: {
							fontSize: '48rpx',
							color: '#1B2120',
							fontWeight: 'bold'
						}
					}
				]
			},
			{
				type: 'qrcode',
				text: url.value,
				css: {
					marginBottom: '40rpx',
					marginTop: '40rpx',
					marginLeft: '125rpx',
					width: '400rpx',
					height: '400rpx'
				}
			},
			{
				type: 'view',
				css: {
					textAlign: 'center'
				},
				views: [
					{
						type: 'text',
						text: `使用支付宝扫一扫、扫码支付`,
						css: {
							fontSize: '26rpx',
							color: '#7C807F'
						}
					}
				]
			}
		]
	};
});


// checkList 用于存储订单状态检验函数
// 因为不同功能的订单，接口、接口字段、以及支付成功后的需求不同，所以在此进行区分

// 订单状态检验函数: 检验当前订单是否为已支付状态, 以及添加支付成功后所需要做的操作
// 不同的订单状态检验函数必须添加注释，用于描述该函数所对应的业务范围
const checkList = computed(() => {
	// return {
	// 	petsService: check0,
	// 	xxxService: xxxx
	// };
	return {
		petsService: check0,
		currentCreateProgress:currentCreateProgress,
		shopping:shopping
	};
})

onLoad((options) => {
	// option 必传参数
	// checkOrderType: 订单已支付状态检验和支付成功后的后续功能： 0 陪宠
	// payAmount: 订单金额
	// url: 第三方付款链接
	
	params = options;
	params.checkOrderType = ['undefined', 'null'].includes(params.checkOrderType) ? 'petsService' : params.checkOrderType
	
	console.log(params);
	url.value = `${decodeURIComponent(options.url)}`;
	uni.showLoading({
		mask: true
	});
	setTimeout(() => {
		showPainter.value = true;
		uni.hideLoading();
	}, 1000);
});

const getPoster = (e) => {
	posterPath.value = e;
};
const onAssistantQrcodeSave = async () => {
	try {
		const params = {
			code: 'scope.writePhotosAlbum',
			message: '需要获取写入相册的权限，是否前往授权？'
		};
		// #ifdef MP-TOUTIAO
		params.code = 'scope.album';
		// #endif
		await permissionGet(params);
		uni.saveImageToPhotosAlbum({
			filePath: posterPath.value,
			success: function () {
				uni.showToast({
					title: '保存成功',
					icon: 'none'
				});
			}
		});
	} catch (error) {
		uni.showToast({
			title: '获取授权失败',
			icon: 'none'
		});
	}
};
const setClipboardData = (val) => {
	uni.setClipboardData({
		data: val
	});
};

// 宠物服务订单状态检验和支付成功跳转
const check0 = async () => {
	uni.showLoading({
		mask: true,
		title: '查询中'
	});
	await getOrderInfo();
	uni.hideLoading();
	if(orderInfo.status != 0) {
		uni.showToast({
			title: '支付成功'
		});
		uni.redirectTo({
			url: `/pages/payment/successfulPayment/index?orderId=${params.orderId}`
		});
		return
	} else {
		uni.showToast({
			icon: 'none',
			title: '暂未付款'
		});
	}
};

//线上商城
const shopping = async()=>{
	const { data } = await api({
		method: 'get',
		url: `/mall/shopping/order/new/${params.orderId}`
	});
	console.log(data)
	if(data.paymentInfoVO && data.paymentInfoVO.paymentTime){
		uni.redirectTo({
			url:'/pages/shopping/orderList/index'
		})
	}else{
		uni.showToast({
			icon: 'none',
			title: '暂未付款'
		});
	}
}

//保证金状态检验和支付成功跳转
const currentCreateProgress = async() =>{
	const res = await api({
		method: 'get',
		url: `/mall/studio/currentCreateProgress`,
		data:{
			userId:userInfo.value.id
		}
	})
	if(res){
		if(res.data.certificationFlag&&!res.data.studioFlag){
			uni.navigateTo({
				url:`/pages/applyLookAfterPet/openStudio/openStudio?selectOpeningType=1&deposit=${params.payAmount}`
			})
		}else{
			uni.showToast({
				icon: 'none',
				title: '暂未付款'
			});
		}
	}
}


//订单状态查询
const getOrderInfo = async () => {
	const { data } = await api({
		method: 'get',
		url: `/mall/order/detail/${params.orderId}`
	});
	orderInfo = data;
};
</script>

<style lang="scss" scoped>
.container {
	padding: 40rpx 48rpx;
	box-sizing: border-box;

	.tips {
		font-size: 32rpx;
		color: #1b2120;
		font-weight: bold;
		margin-bottom: 40rpx;
	}
	.tips_text {
		font-size: 28rpx;
		color: #1b2120;
		margin-bottom: 48rpx;
	}
	.one_text {
		margin-bottom: 24rpx;
	}
	.painter {
		margin: 40rpx auto;
		width: 650rpx;
		border: 1px solid #fcf2f4;
	}

	.btn {
		> view {
			margin-bottom: 24rpx;
		}
	}
	.pay_btn {
		display: flex;
		background-color: #f5f6f7;
		flex-wrap: wrap;
		align-content: center;
		justify-content: center;
		height: 96rpx;
		font-size: 32rpx;
		color: #1b2120;
		border-radius: 12rpx;

		.img {
			width: 36rpx;
			height: 36rpx;
			margin-top: 6rpx;
			margin-right: 8rpx;
		}
		.pay_btn_text {
			border-bottom: 1px solid #1b2120;
		}
	}
}
</style>
